<template>
  <div class="address">
    <nav>
      <h2>通讯录页面</h2>
      <div class="address-icon">
        <SearchIcon />
        <AddComponent />
      </div>
    </nav>
    <div class="address-list">
      <div class="address-item" @click="goToMsgFromFriends">
        <div class="img">
          <van-badge class="dot" :content="num" max="99" v-show="mesg"> </van-badge>
          <img src="@/assets/image/addressImg/icon1.png" alt="img" />
        </div>
        <div class="title">新的朋友</div>
      </div>
      <div class="address-item">
        <div class="img">
          <img src="@/assets/image/addressImg/icon2.png" alt="img" />
        </div>
        <div class="title">仅聊天的朋友</div>
      </div>
      <div class="address-item">
        <div class="img">
          <img src="@/assets/image/addressImg/icon3.png" alt="img" />
        </div>
        <div class="title">群聊</div>
      </div>
      <div class="address-item">
        <div class="img">
          <img src="@/assets/image/addressImg/icon4.png" alt="img" />
        </div>
        <div class="title">标签</div>
      </div>
      <div class="address-item">
        <div class="img">
          <img src="@/assets/image/addressImg/icon5.png" alt="img" />
        </div>
        <div class="title">公众号</div>
      </div>
      <div class="enterprise">
        <div class="desc">我的企业及企业联系人</div>
        <div class="address-item" @click="goToMsgFromFriends">
          <div class="img">
            <img src="@/assets/image/addressImg/icon8.png" alt="img" />
          </div>
          <div class="title">企业微信联系人</div>
        </div>
      </div>
    </div>

    <div class="friends-list">
      <div
        v-for="l in friendsBasicList"
        :key="l.id"
        class="friends-item"
        @click="goToWantToChat(l)"
      >
        <div class="img">
          <img :src="showImg(l.avatarurl)" alt="head" />
        </div>
        <div class="desc">
          <span>{{ l.nickname || l.phone }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AddComponent from "../components/AddComponent.vue";
import SearchIcon from "../components/SearchIcon.vue";
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    AddComponent,
    SearchIcon,
  },
  created() {
    this.searchAllFriends();
    this.delAllFirendsBasic();
    console.log(this.count);
  },
  watch: {
    count(newVal) {
      console.log(newVal);
      this.num = newVal;
    },
    friendsBasicList(newV) {
      console.log(newV);
    }
  },
  computed: {
    ...mapState({
      count: (state) => state.friends.count,
      mesg: (state) => state.friends.mesg,
      friendsBasicList: (state) => state.friends.friendsAllBasicArr,
    }),
  },
  methods: {
    ...mapActions(["searchAllFriends"]),
    ...mapMutations(["delAllFirendsBasic"]),

    goToMsgFromFriends() {
      this.$router.push({
        name: "msgFromFriends",
      });
    },
    goToWantToChat(obj) {
      this.$router.push({
        name: "wantToChat",
        params: { list: JSON.stringify(obj) },
      });
    },
    showImg(img) {
      if (img != undefined) {
        return img;
      } else {
        return require("../assets/image/addressImg/head.webp");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.address {
  height: 100vh;
  background-color: rgb(17, 17, 17);
  color: white;

  nav {
    position: relative;
    height: 45px;
    background-color: rgb(17, 17, 17);
    color: white;
    text-align: center;
    line-height: 45px;

    .address-icon {
      width: 60px;
      position: absolute;
      right: 15px;
      top: 10px;
      display: flex;
      justify-content: space-between;
    }
  }

  .address-list {
    margin-bottom: 15px;

    .address-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 45px;
      line-height: 45px;
      padding-left: 15px;
      background-color: rgb(24, 24, 24);

      .img {
        position: relative;
        width: 30px;
        height: 30px;
        border-radius: 5px;
        margin-right: 15px;

        img {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 3px;
        }
        .dot {
          position: absolute;
          right: -10px;
          top: -6px;
        }
        .van-badge {
          border: none;
          transform: scale(.8);
        }
      }

      .title {
        width: 88%;
        border-bottom: 1px solid rgba(204, 203, 203, 0.1);
      }
    }
    .enterprise {
      .desc {
        color: gray;
        margin: 15px;
      }
    }
  }

  .friends-list {
    padding-left: 15px;

    .friends-item {
      height: 45px;
      line-height: 45px;
      width: 100%;
      background-color: rgb(24, 24, 24);
      display: flex;
      flex-direction: row;
      align-items: center;

      .img {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        margin-right: 15px;

        img {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 3px;
        }
      }

      .desc {
        width: 90%;
        border-bottom: 1px solid rgba(204, 203, 203, 0.1);
      }
    }
  }
}
</style>